<template>
  <c-modal
    v-model="visible"
    title="人脸识别"
    :width="460"
    noFooter
    @afterClose="afterClose"
  >
    <div class="tc">
      <c-qrcode :url="qrcodeUrl" />
      <div class="tip tc" style="margin-top: 10px;">
        若完成刷脸后长时间无反应，请点击下方按钮
      </div>
      <div style="margin: 10px 0 20px">
        <c-button
          type="danger"
          :loading="faceFinishLoading"
          @click="faceFinish"
          :disabled="faceFinishDisabled"
        >
          <c-countdown
            ref="countdown"
            @finish="faceFinishDisabled = false"
            v-if="faceFinishDisabled"
          />
          <span>我已刷脸</span>
        </c-button>
      </div>
      <a-alert
        style="margin-top: 24px;"
        type="warning"
        :message="
          `请使用${faceType}扫描二维码，并确保${faceType}已登录本人账号`
        "
        show-icon
      ></a-alert>
    </div>
  </c-modal>
</template>

<script>
import cQrcode from "@/components/qrcode";
import { esignauthdetail } from "@/api/certify";
import socketDict from "@/dict/socket";
import cCountdown from "@/components/countdown-progress";

export default {
  components: {
    cQrcode,
    cCountdown
  },
  props: {
    value: {
      type: Boolean
    },
    qrcodeUrl: {
      type: String,
      default: undefined
    },
    type: {
      type: Number
    },
    flowId: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      faceFinishLoading: false, // 是否正在查询刷脸结果
      faceFinishDisabled: true
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(n) {
        this.$emit("input", n);
      }
    },
    msg() {
      return this.$store.state.socket && this.$store.state.socket.message;
    },
    // 刷脸类型
    faceType() {
      return this.type === 0 ? "支付宝" : "微信";
    }
  },
  watch: {
    // 显示时获取二维码地址
    visible(v) {
      if (v) {
        this.$nextTick(() => {
          this.$refs.countdown.open();
        });
      } else {
        this.$nextTick(() => {
          this.$refs.countdown.clear();
        });
      }
    },
    msg(newVal) {
      if (
        newVal.code === socketDict.code.realnameFace &&
        newVal.data.messageType === 200
      ) {
        // 0代表成功 messageType是200代表刷脸消息
        if (newVal.data.code === 0) {
          this.$emit("success");
        } else {
          this.$message.error("刷脸失败，请重新刷脸");
          this.$emit("fail");
        }
      }
    }
  },
  methods: {
    // 已完成刷脸
    faceFinish() {
      this.faceFinishLoading = true;
      esignauthdetail({
        flowId: this.flowId
      })
        .then(res => {
          if (res.status === "SUCCESS") {
            this.$emit("success");
          } else if (res.status === "FAIL") {
            this.$message.error("刷脸失败，请重试");
            this.$emit("fail");
          } else {
            this.$message.warning("请先进行刷脸");
            this.$emit("notFace");
          }
        })
        .finally(() => {
          this.faceFinishLoading = false;
        });
    },
    afterClose() {
      console.log("afterClose");
    }
  }
};
</script>
